
<template>
    <section class="modlude">
        <!-- <div style="width: max-content"> -->
        <div style="display:flex;">
            <!-- <div> -->
            <el-form :inline="true" :model="formSearch" label-width="80px">
                <el-form-item label="报警系统">
                    <el-select v-model="value" size='mini'>
                        <el-option label="请选择" value="请选择"></el-option>
                        <el-option label="部门" value="全部"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="处理状态">
                    <el-select v-model="value1" size='mini' >
                        <el-option label="待处理" value="在线">待处理</el-option>
                        <el-option label="离线" value="离线">离线</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间段">
                    <el-select v-model="value2" size='mini' >
                        <el-option label="请选择开始时间" value="请选择开始时间"></el-option>
                    </el-select> —
                    <el-select v-model="value2" size='mini' >
                        <el-option label="请选择结束时间" value="请选择结束时间"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入内容" size='mini'></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="info" color="#000000" size="mini">查询</el-button>
                  <el-button type="info" color="#000000" size="mini">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- </div> -->
        <div class="title" style="width:100%;background: #eee;">总共 <span
                style="font-size: medium;">{{formData.length}}</span> 条 已选中<span
                style="font-size: medium;">{{multipleSelection.length}}</span></div>
        <el-table :data="formData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange"
            style="width: 100%" stripe>
            <el-table-column type="selection" ></el-table-column>
            <el-table-column prop="name" label="报警信息" ></el-table-column>
            <el-table-column prop="namea" label="报警设备" ></el-table-column>
            <el-table-column prop="nameb" label="报警设备位置" ></el-table-column>
            <el-table-column prop="namec" label="报警系统" ></el-table-column>
            <el-table-column prop="namej" label="报警类型" ></el-table-column>
            <el-table-column prop="named" label="设备品牌" ></el-table-column>
            <el-table-column prop="namee" label="设备型号" ></el-table-column>
            <el-table-column prop="namef" label="报警时间" ></el-table-column>
            <el-table-column prop="nameg" label="报警持续时长"></el-table-column>
            <el-table-column label="nameh">
                <template slot-scope="scope">
                    {{scope.row.idNumberType==0?"待处理":"已处理"}}
                </template>
            </el-table-column>
            <el-table-column prop="namei" label="处理人" ></el-table-column>
            <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                    <el-button size="mini">定位</el-button>
                    <el-button size="mini">派单</el-button>
                    <el-button size="mini">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="align:center">
            <el-pagination background layout="prev, pager, next" :total="3">
            </el-pagination>
            <!-- </div> -->
        </div>

    </section>
</template>
<script>
export default {
    name: 'tree1',
    data() {
        return {
            value: '',
            value1: '',
            value2: '',
            formData: [
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
                {
                    name: '电梯故障',
                    namea: '三栋东侧电梯1',
                    nameb: '三栋',
                    namec: '电梯管理',
                    namej: '故障报警',
                    named: '谋方',
                    namee: 'DT000001',
                    namef: '2021-12-03 11:20:30',
                    nameg: '0:02:24',
                    nameh: 0,
                    namei: '小于',
                },
            ],
            multipleSelection: [],
            min: 0,
            nowName: '', //子集
            pName: '', //父级
            type: '',
            sortValue: '', //排序
            abbreviation: '', //简称
            description: '', //描述
            inputNumber: 0,
            checkStrictly: false, //控制子集和父级的关系
            changeHandle: 1, //1表示执行新增，0表示修改
            formSearch: {
                //查询条件
                name: '',
                status: 1,
            },
            parentType: '', //父级类型
            formPush: {
                sortValue: 0,
                // type:1,
                status: true,
            }, //表单提交

            defaultProps2: {
                //树状图key定义
                children: 'data',
                label: 'name',
            },
            parentId: '',
            menuList: [], //角色树
            showmenuList: [], //角色回显
            dataTree: [], //树数据
            filterText: '', //输入的查询内容
            rules: {
                parentId: [{ required: true, message: '该项不能为空' }],
                name: [{ required: true, message: '该项不能为空' }],
            },
            roles: [],
            delTree: [], //删除树
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleNodeClick(data) {
            console.log(data);
        },
        reSet() {
            this.formPush = {
                sortValue: 0,
                status: true,
            };
            this.formSearch = {
                name: '',
                status: 1,
            };
            this.getInit();
        },
        showRole(obj) {
            //角色绑定
            this.checkStrictly = true;
            roletreeList(obj.id).then((res) => {
                //权限选择列表
                console.log(res);
                if (res.data.ok) {
                    this.menuList = res.data.data;
                    this.showmenuList = obj.roles;
                    this.$nextTick(() => {
                        this.$refs.rightsTree.setCheckedKeys(this.showmenuList);
                        this.checkStrictly = false;
                    });
                    this.formPush.roles = obj.roles;
                }
            });
        },
        handleCheckChange(checkedNodes, obj) {
            //树状图选中
            console.log(obj);
            this.formPush.roles = [];
            obj.checkedNodes.forEach((item) => {
                if (!item.data) {
                    this.formPush.roles.push(item.id);
                }
            });
            console.log(this.formPush.roles);
        },
        showupdata() {
            //切换修改状态
            this.changeHandle = 0;
            this.inputNumber = this.formPush.sortValue || 0;
            this.formPush.name = this.nowName;
            this.formPush.parentName = this.pName;
            this.formPush.abbreviation = this.abbreviation;
            this.formPush.description = this.description;
            this.formPush.type = this.type;
            this.inputNumber = this.formPush.sortValue = this.sortValue;
        },
        showAdd() {
            //切换添加状态
            if (!this.formPush.parentId && this.formPush.parentId != 0) {
                this.$message('请先选择组织');
            }
            if (!this.formPush.parentName) {
                this.formPush.parentName = this.nowName;
            }
            this.formPush.parentName = this.nowName;
            this.formPush.name = '';
            this.formPush.abbreviation = '';
            this.formPush.description = '';
            if (this.formPush.children) {
                this.formPush.sortValue = this.inputNumber =
                    this.formPush.children.length;
            } else {
                this.formPush.sortValue = this.inputNumber = 0;
            }

            this.changeHandle = 1;
            // this.formPush={sortValue:0,status:true}
        },
        getInit() {
            // orgTree(this.formSearch).then((res)=>{
            //   console.log(res)
            //   if(res.data.ok){
            //     this.dataTree = res.data.data
            //   }
            // })
        },
        filterNode(value, data) {
            //树状图节点搜索
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        treeClick(data, nodes) {
            //树状图node节点点击事件,将该节点的数据填充，修改
            this.parentId = data.parentId;
            this.formPush = JSON.parse(JSON.stringify(data));
            this.parentType = nodes.parent.data.type;
            this.nowName = this.formPush.name;
            this.pName = this.formPush.parentName;
            this.sortValue = this.formPush.sortValue;
            this.abbreviation = this.formPush.abbreviation;
            this.description = this.formPush.description;
            this.type = this.formPush.type;
            if (!this.formPush.parentName) {
                this.formPush.parentName = this.formPush.name;
            }
            if (this.changeHandle == 1) {
                this.formPush.name = '';
                this.formPush.parentName = this.nowName;
                this.formPush.abbreviation = '';
                this.formPush.description = '';
                if (this.formPush.children) {
                    this.formPush.sortValue = this.inputNumber =
                        this.formPush.children.length;
                } else {
                    this.formPush.sortValue = 0;
                }
            } else {
                console.log(this.sortValue);
                if (this.formPush.children) {
                    this.inputNumber = this.sortValue;
                    this.formPush.parentName = this.pName;
                    this.formPush.abbreviation = this.abbreviation;
                    this.formPush.description = this.description;
                } else {
                    this.inputNumber = this.sortValue;
                    this.formPush.sortValue = this.sortValue;
                }
            }

            console.log(data);
            this.showRole(data);
        },
        addTree(formName) {
            //添加树状图node节点
            if (!this.formPush) {
                this.$message('请先选择组织');
                return;
            }
            if (this.parentType == 2 && this.formPush.type == 1) {
                this.$message('部门下面不能创建单位');
                return;
            }
            if (this.formPush.type != 2) {
                this.formPush.roles = [];
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        name: this.formPush.name,
                        parentId: this.formPush.id,
                        abbreviation: this.formPush.abbreviation,
                        description: this.formPush.description,
                        status: this.formPush.status,
                        type: this.formPush.type,
                        roles: this.formPush.roles,
                        sortValue: this.formPush.sortValue,
                    };
                    saveTree(params).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                            });
                            this.getInit();
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        upTree(formName) {
            //修改树状图node节点
            let params = JSON.parse(JSON.stringify(this.formPush));
            delete params.children;
            delete params.parentName;
            console.log(params);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateTree(params).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'warning',
                            });
                            this.getInit();
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        checkInfor(data, ev) {
            //监听勾选
            console.log(ev);
            this.delTree = ev.checkedKeys;
            let topFather = ev.halfCheckedKeys;
            if (topFather.length == 0) {
                this.delTree.shift();
            }
            if (this.delTree) {
                this.formPush.parentId = this.delTree[0];
            }
        },
        deleInfor() {
            this.$confirm('确认删除吗？')
                .then((_) => {
                    deleteTree(this.delTree).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message('删除成功');
                            this.getInit();
                        }
                    });
                })
                .catch((_) => {});
        },
    },
    mounted() {
        this.getInit();
    },
};
</script>
<style scoped>
.modlude {
    width: 100%;
}
</style>
